<template>
  <div class="components-setting">
    <SettingWrap :list="list" placement="left" :name="selectedComponent.text || selectedComponent.label">
      <template v-slot:default="{ activeName }">
        <Geometry v-if="activeName === 'geometry'" />
        <Style v-else-if="activeName === 'style'" />
        <Data v-else-if="activeName === 'data'" />
        <Linkage v-else-if="activeName === 'linkage'" />
        <Jump v-else-if="activeName === 'jump'" />
        <Animations v-else-if="activeName === 'animations'" />
        <!-- <Event v-else /> -->
      </template>
    </SettingWrap>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Style from './Style'
import Event from './Event'
import Geometry from './Geometry'
import Data from './Data'
import Linkage from './Linkage'
import Jump from './Jump/index.jsx'
import SettingWrap from '../../../common/SettingWrap'
import Animations from './Animations'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState('lowCode', {
      selectedComponent: (state) => state.selectedComponent,
    }),
    list() {
      const getTitleCase = (string) => {
        return string[0].toUpperCase() + string.substr(1)
      }
      const common = [
        {
          icon: 'column-width',
          title: '几何属性',
          id: 'geometry',
        },
        {
          icon: 'bg-colors',
          title: '样式效果',
          id: 'style',
        },
        // {
        //   icon: "alert",
        //   title: "事件响应",
        //   id: "event"
        // },
        {
          icon: 'block',
          title: '联动设置',
          id: 'linkage',
        },
        {
          icon: 'arrow-right',
          title: '跳转设置',
          id: 'jump',
        },
        {
          icon: 'global',
          title: '数据绑定',
          id: 'data',
        },
        {
          icon: 'alert',
          title: '动画设置',
          id: 'animations',
        },
      ]
      return common.map((item) => {
        return {
          ...item,
          isShow: this.selectedComponent[`is${getTitleCase(item.id)}`],
        }
      })
    },
  },
  methods: {},
  components: {
    Style,
    Event,
    Geometry,
    Data,
    Linkage,
    Jump,
    SettingWrap,
    Animations,
  },
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
